<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/font-awesome.css" />
        <link rel="stylesheet" href="css/index.css" />
        <div id="container">
            <nav class="narrow">
                <div id="nav-head">
                    <div id="system-title">
                        物品资产管理系统
                    </div>
                    <div id="nav-collpse-btn">
                        <i class="fa fa-reorder"></i>
                    </div>
                </div>
                <div id="user-profile">
                    <div id="user-face">
                        <img src="image/th.jpg"/>
                    </div>
                    <div id="user-name">管理员</div>
                    <div id="logout-btn"><i class="fa fa-sign-out"></i>注销</div>
                </div>
                <ul id="nav-items">

                    <li class="nav-item">
                        <div class="nav-item-title"><i class="fa fa-desktop"></i>物品资产管理</div>
                        <div class="nav-item-chevron nav-item-chevron-rotate"><i class="fa fa-chevron-right"></i></div>
                        <ul class="nav-sub-items">
                            <li class="nav-sub-item nav-sub-item-active">管理首页</li>
                            <li class="nav-sub-item">物品信息</li>
                            <li class="nav-sub-item">物品便捷打印</li>
                            <li class="nav-sub-item">物品借出归还</li>
                            <li class="nav-sub-item">物品盘点</li>
                            <li class="nav-sub-item">物品操作历史记录</li>
                            <li class="nav-sub-item">物品自定义属性</li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <div class="nav-item-title"><i class="fa fa-sitemap"></i>组织管理</div>
                        <div class="nav-item-chevron"><i class="fa fa-chevron-right"></i></div>
                        <ul class="nav-sub-items" style="display: none">
                            <li class="nav-sub-item">部门管理</li>
                            <li class="nav-sub-item">员工管理</li>
                            <li class="nav-sub-item">物品存放位置管理</li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <div class="nav-item-title"><i class="fa fa-user"></i>个人中心</div>
                        <div class="nav-item-chevron"><i class="fa fa-chevron-right"></i></div>
                        <ul class="nav-sub-items" style="display: none">
                            <li class="nav-sub-item">用户信息</li>
                            <li class="nav-sub-item">系统设置</li>
                            <li class="nav-sub-item">角色管理</li>
                            <li class="nav-sub-item">账户管理</li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <div class="nav-item-title"><i class="fa fa-external-link"></i>其他</div>
                        <div class="nav-item-chevron"><i class="fa fa-chevron-right"></i></div>
                        <ul class="nav-sub-items" style="display: none">
                            <li class="nav-sub-item">系统帮助</li>
                            <li class="nav-sub-item">打印机器设置</li>
                        </ul>
                    </li>

                </ul>
            </nav>
            <main>
                
            </main>
        </div>
    </head>
    <body>
        <script src="js/jquery.js"></script>
        <script>

            $(() => {

                $('.nav-item-title').click(function() {
                    const e = $(this)
                    e.nextAll('.nav-item-chevron').toggleClass('nav-item-chevron-rotate')
                    e.nextAll('.nav-sub-items').slideToggle()
                })

                $('.nav-sub-item').click(function() {
                    const e = $(this)
                    $('.nav-sub-item').removeClass('nav-sub-item-active')
                    e.addClass('nav-sub-item-active')
                })

            })
        </script>
    </body>
</html>